<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '175px',
    }"
  >
    <!-- 搜索-->
    <el-form ref="formSearch" :model="formSearch" size="small" inline>
      <el-form-item>
        <el-input
          v-model.trim="formSearch.param.title"
          placeholder="请输入标题"
          maxlength="30"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          clearable
          v-model="formSearch.param.articleType"
          placeholder="请选择类型"
        >
          <el-option label="专题" value="1"></el-option>
          <el-option label="新闻" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          clearable
          v-model="formSearch.param.columnId"
          placeholder="请选择栏目"
        >
          <el-option
            v-for="(item, index) in column"
            :key="index"
            :label="item.columnName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          clearable
          v-model="formSearch.param.articleStatus"
          placeholder="请选择状态"
        >
          <el-option label="启用" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          clearable
          v-model="formSearch.param.approveStatus"
          placeholder="请选择审核状态"
        >
          <el-option label="草稿" value="0"></el-option>
          <el-option label="发布" value="1"></el-option>
          <el-option label="通过" value="2"></el-option>
          <el-option label="驳回" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formSearch.param.date"
          @change="dateChange"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 100%"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <span class="wrap-btn wrap-primary" @click="search">查询</span>
        <span
          class="wrap-btn wrap-success"
          v-if="$checkPermission(101)"
          @click="add"
          >添加新闻</span
        >
      </el-form-item>
    </el-form>
    <!-- 数据列表 -->
    <div class="wrap-other-roll">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F6F7F9' }"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="articleType" label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.articleType == 1">专题</span>
            <span v-if="scope.row.articleType == 2">新闻</span>
          </template>
        </el-table-column>
        <el-table-column prop="columnName" label="栏目"></el-table-column>
        <el-table-column prop="addName" label="提交人"></el-table-column>
        <el-table-column
          prop="addTime"
          label="创建时间"
          width="160px"
        ></el-table-column>
        <el-table-column label="状态" width="80px" align="center">
          <template slot-scope="scope">
            <el-link
              type="success"
              :underline="false"
              v-if="scope.row.articleStatus == 0"
              >启用</el-link
            >
            <el-link
              type="danger"
              :underline="false"
              v-if="scope.row.articleStatus == 1"
              >停用</el-link
            >
          </template>
        </el-table-column>
        <el-table-column prop="approveStatus" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.approveStatus == 0">草稿</span>
            <span v-if="scope.row.approveStatus == 1">发布</span>
            <span v-if="scope.row.approveStatus == 2">通过</span>
            <span v-if="scope.row.approveStatus == 3">驳回</span>
          </template>
        </el-table-column>
        <el-table-column prop="approveResult" label="审批意见">
          <template slot-scope="scope">
            <el-tooltip
              popper-class="ellipsis-tip"
              :content="scope.row.approveResult"
              placement="top-start"
            >
              <span class="ellipsis">{{ scope.row.approveResult }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="操作"
          width="80px"
          align="center"
        >
          <template slot-scope="scope">
            <el-dropdown @command="(command) => handle(command, scope.row)">
              <span class="el-dropdown-link">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="view" v-if="$checkPermission(104)"
                  >查看</el-dropdown-item
                >
                <el-dropdown-item
                  command="publish"
                  v-if="scope.row.approveStatus == 0 && $checkPermission(101)"
                  >发布</el-dropdown-item
                >
                <el-dropdown-item
                  command="recall"
                  v-if="scope.row.approveStatus == 1 && $checkPermission(101)"
                  >撤回</el-dropdown-item
                >
                <el-dropdown-item
                  command="edit"
                  v-if="
                    (scope.row.approveStatus == 0 ||
                      scope.row.approveStatus == 3) &&
                    $checkPermission(102)
                  "
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item
                  command="changeStatus"
                  v-if="
                    scope.row.articleStatus == 1 &&
                    scope.row.approveStatus == 2 &&
                    $checkPermission(105)
                  "
                  >启用</el-dropdown-item
                >
                <el-dropdown-item
                  command="changeStatus"
                  v-if="
                    scope.row.articleStatus == 0 &&
                    scope.row.approveStatus == 2 &&
                    $checkPermission(106)
                  "
                  >停用</el-dropdown-item
                >
                <el-dropdown-item
                  command="remove"
                  v-if="
                    scope.row.approveStatus != 0 &&
                    scope.row.articleStatus == 1 &&
                    $checkPermission(103)
                  "
                  >删除</el-dropdown-item
                >
                <el-dropdown-item
                  command="top"
                  v-if="
                    scope.row.topFlag == 1 &&
                    scope.row.approveStatus == 2 &&
                    $checkPermission(123)
                  "
                  >置顶</el-dropdown-item
                >
                <el-dropdown-item
                  command="top"
                  v-if="
                    scope.row.topFlag == 0 &&
                    scope.row.approveStatus == 2 &&
                    $checkPermission(123)
                  "
                  >移除置顶</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <web-page
      :page="formSearch.pageNum"
      :size="formSearch.pageSize"
      :total="total"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    ></web-page>
    <!-- 查看 -->
    <el-dialog title="查看" :visible.sync="isLook" width="888px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="标题" :span="2">
          {{ lockData.info.title }}
        </el-descriptions-item>
        <el-descriptions-item label="摘要" :span="2">
          {{ lockData.info.resume }}
        </el-descriptions-item>
        <el-descriptions-item label="作者">
          {{ lockData.info.author }}
        </el-descriptions-item>
        <el-descriptions-item label="来源">
          {{ lockData.info.source }}
        </el-descriptions-item>
        <el-descriptions-item label="网址" :span="2">
          {{ lockData.info.linkUrl }}
        </el-descriptions-item>
        <el-descriptions-item label="类型">
          {{ lockData.info.articleType == 1 ? '专题' : '新闻' }}
        </el-descriptions-item>
        <el-descriptions-item label="栏目">
          {{ lockData.info.columnName }}
        </el-descriptions-item>
        <el-descriptions-item label="缩略图" :span="2">
          <el-image
            style="height: 80px"
            v-if="lockData.info.previewImg"
            :src="lockData.info.previewImg"
            :preview-src-list="[lockData.info.previewImg]"
          >
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item label="提交人">
          {{ lockData.info.addName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ lockData.info.addTime }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ lockData.info.articleStatus == 0 ? '启用' : '停用' }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <span v-if="lockData.info.approveStatus == 0">草稿</span>
          <span v-if="lockData.info.approveStatus == 1">发布</span>
          <span v-if="lockData.info.approveStatus == 2">通过</span>
          <span v-if="lockData.info.approveStatus == 3">驳回</span>
        </el-descriptions-item>
        <el-descriptions-item label="审批意见" :span="2">
          <el-tooltip
            popper-class="ellipsis-tip-span2"
            :content="lockData.info.approveResult"
            placement="top-start"
          >
            <span class="ellipsis-span2">{{
              lockData.info.approveResult
            }}</span>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="内容" :span="2">
          <div class="wrap-html" v-html="lockData.info.content"></div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      column: [],
      formSearch: {
        pageNum: 1,
        pageSize: 10,
        param: {},
      },
      total: null,
      tableData: [],
      isLook: false,
      lockData: { info: {}, approves: [] },
    }
  },
  created() {
    this.columnList()
    this.itemList()
  },
  methods: {
    itemList() {
      // 获取列表
      this.$axios
        .post('/admin/portal/article/page', this.formSearch)
        .then((data) => {
          this.tableData = []
          if (data.code == 200) {
            this.tableData = data.data.list
            this.total = data.data.total
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    sizeChange(val) {
      //每页条数
      this.formSearch.pageSize = val
      this.itemList()
    },
    currentChange(val) {
      //分页
      this.formSearch.pageNum = val
      this.itemList()
    },
    search() {
      //搜索
      this.formSearch.pageNum = 1
      this.itemList()
    },
    dateChange(val) {
      // 时间范围发生变化
      if (val) {
        this.formSearch.param.start = val[0]
        this.formSearch.param.stop = val[1]
      } else {
        this.formSearch.param.start = ''
        this.formSearch.param.stop = ''
      }
    },
    add() {
      //添加
      this.$router.push('/portalCenter/news/handle')
    },
    handle(command, row) {
      //操作
      if (!command) {
        this.$message.error('菜单选项缺少command属性')
        return
      }
      switch (command) {
        case 'view':
          //查看
          this.$axios
            .get(
              `/admin/portal/article/findApprove?id=${row.id}&runTaskId=${row.runTaskId}`
            )
            .then((data) => {
              this.lockData = { info: {}, approves: [] }
              if (data.code == 200) {
                this.lockData = data.data
                this.isLook = true
              } else {
                this.$message.error(data.msg)
              }
            })
          break
        case 'publish':
          this.$axios
            .get(`/admin/portal/article/pub?id=${row.id}`)
            .then((data) => {
              if (data.code == 200) {
                this.itemList()
                this.$message.success('操作成功！')
              } else {
                this.$message.error(data.msg)
              }
            })
          break
        case 'recall':
          this.$axios
            .get(`/admin/portal/article/recall?id=${row.id}`)
            .then((data) => {
              if (data.code == 200) {
                this.itemList()
                this.$message.success('操作成功！')
              } else {
                this.$message.error(data.msg)
              }
            })
          break
        case 'edit':
          this.$router.push({
            path: '/portalCenter/news/handle',
            query: { id: row.id },
          })
          break
        case 'changeStatus':
          //启用停用
          const status = row.articleStatus == 0 ? 1 : 0
          this.$axios
            .get(
              `/admin/portal/article/updateStatus?id=${row.id}&status=${status}`
            )
            .then((data) => {
              if (data.code == 200) {
                this.itemList()
                this.$message.success('操作成功！')
              } else {
                this.$message.error(data.msg)
              }
            })
          break
        case 'remove':
          //删除
          this.$confirm('您确定要删除该条数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              this.$axios
                .get('/admin/portal/article/del?id=' + row.id)
                .then((data) => {
                  if (data.code == 200) {
                    this.itemList()
                    this.$message.success('操作成功！')
                  } else {
                    this.$message.error(data.msg)
                  }
                })
            })
            .catch(() => {})
          break
        case 'top':
          const topFlag = row.topFlag == 0 ? 1 : 0
          this.$axios
            .get(`/admin/portal/article/top?id=${row.id}&status=${topFlag}`)
            .then((data) => {
              if (data.code == 200) {
                this.itemList()
                this.$message.success('操作成功！')
              } else {
                this.$message.error(data.msg)
              }
            })
          break
      }
    },
    columnList() {
      //获取栏目
      this.$axios.get('/admin/portal/column/listColumns').then((data) => {
        this.column = []
        if (data.code == 200) {
          this.column = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
